<template>
    <el-form ref="formRef" :rules="rules" :model="form" label-width=" 180px">
        <el-form-item label="品牌名称：" prop="name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="品牌首字母：">
            <el-input v-model="form.firstLetter" />
        </el-form-item>
        <el-form-item label="品牌LOGO：" prop="logo">
            <el-upload v-model:file-list="logo" class="upload-demo"
                action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-preview="handlePreview"
                 :on-success="handlelogo" list-type="picture" :limit="1">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传jpg/png文件，且不超过100kb
                    </div>
                </template>
            </el-upload>
        </el-form-item>
        <el-form-item label="品牌专区大图：">
            <el-upload v-model:file-list="bigPic" class="upload-demo"
                action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-preview="handlePreview"
                :on-success="handlebigPic" list-type="picture">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传jpg/png文件，且不超过100kb
                    </div>
                </template>
            </el-upload>
        </el-form-item>
        <el-form-item label="品牌故事：">
            <el-input v-model="form.brandStory" />
        </el-form-item>
        <el-form-item label="排序属性：">
            <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="是否显示:">
            <el-radio-group v-model="form.showStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="品牌制造商:">
            <el-radio-group v-model="form.factoryStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button v-if="!route.query.id" @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, FormInstance, UploadProps, UploadUserFile } from 'element-plus'
import { user } from '@/api';

const route = useRoute();
const router = useRouter();
const logo = ref<UploadUserFile[]>([
])

const bigPic = ref<UploadUserFile[]>([
])

const url = ref('')

const form = reactive({
    bigPic: "",
    brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    showStatus: 0,
    sort: 0
})
const rules = {
    name: [
        { required: true, message: "请输入品牌名称", trigger: "blur" },
        { min: 2, max: 140, message: "名称要在2~140个字符之间", trigger: "blur" }
    ],
    logo: [
    { required: true, message: "请输入品牌logo", trigger: "blur" },
    ]
}
const getlist = () => {
    if (route.query.id) {
        user.getBrandlistApi(route.query.id).then((res) => {
            if (res.code === 200) {
                // 把数据给表单
                Object.assign(form, res.data)
                if(res.data.logo !== ''){
                    let editname = res.data.logo.split("/")
                    logo.value = [{ name: editname[editname.length-1], url: res.data.logo }]                    
                }
                if(res.data.bigPic !== ''){
                    let editname = res.data.bigPic.split("/")
                    bigPic.value = [{ name: editname[editname.length-1], url: res.data.bigPic}]
                }
                

            }
        })
    }
}

getlist()

// 重置功能
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    logo.value = ([])
}

// 上传图片成功后
const handlelogo: UploadProps['onRemove'] = (uploadFile:any) => {
    if(uploadFile.code==200){
        form.logo = uploadFile.data.url    
    }
}

const handlebigPic: UploadProps['onRemove'] = (uploadFile:any) => {
    if(uploadFile.code==200){
        form.bigPic = uploadFile.data.url
    }
}

const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}

// 点击确定
const formRef = ref<FormInstance>()
const onSubmit = () => {
    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            ElMessageBox.confirm("是否提交数据", "提示", {
                type: "warning",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then(() => {
                if (route.query.id) {
                    user.brandlistParamEditapi(route.query.id, form).then((res) => {
                        if (res.code === 200) {
                            ElMessage.success("修改信息成功")
                            router.back()
                        }
                    })
                } else {
                    user.brandlistCreateApi(form).then((res)=> {
                        if (res.code === 200) {
                            ElMessage.success("添加成功")
                            router.back()
                        }
                    })
                    
                }
            })
        }
    })
}
</script>

<style lang="less" scoped>
.el-form {
    border: 1px solid #ccc;
    padding: 10px;
    margin-left: 30%;

    .el-input {
        width: 40%;
    }
}
</style>